<!--
 * @Author: 陈德基
 * @Date: 2023-12-19 23:06:32
 * @LastEditTime: 2024-01-14 09:54:54
 * @Description: 
 * @FilePath: /fullstack/front-end-learning/beginer/demo/demo06/index.html
 * 联系方式：
 * wx: melody_2009
 * qq: 7815171323 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学成在线</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="header">
    <div class="wrapper">
      <!-- logp -->
      <div class="logo">
        <h1><a href="#">学成在线</a></h1>
      </div>
      <div class="nav">
        <ul>
          <li><a href="#" class="active">首页</a></li>
          <li><a href="#">课程</a></li>
          <li><a href="#">职业规划</a></li>
        </ul>
      </div>
      <div class="search">
        <input type="text" placeholder="请输入关键词">
        <a href="#"></a>
      </div>
      <div class="user">
        <a href="#">
          <img src="./uploads/user.png" alt="">
          <span>用户名</span>
        </a>
      </div>
    </div>
  </div>
  <!-- banner区域 -->
  <div class="banner">
    <div class="wrapper">
      <div class="left">
        <ul>
          <li><a href="#">前端开发</a></li>
          <li><a href="#">后端开发</a></li>
          <li><a href="#">UI设计</a></li>
          <li><a href="#">移动开发</a></li>
          <li><a href="#">数据库</a></li>
          <li><a href="#">运维开发</a></li>
          <li><a href="#">其他</a></li>
        </ul>
      </div>
      <div class="right">
        <h3>我的课程表</h3>
        <div class="content">
          <dl>
            <dt>数据可视化教程</dt>
            <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
          </dl>
          <dl>
            <dt>数据可视化教程</dt>
            <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
          </dl>
          <dl>
            <dt>数据可视化教程</dt>
            <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
          </dl>
          <a href="#">全部课程</a>
        </div>
      </div>
    </div>
  </div>
  <div class="recommend wrapper">
    <h3>精品推荐</h3>
    <ul>
      <li><a href="">HTML</a></li>
      <li><a href="">HTML</a></li>
      <li><a href="">HTML</a></li>
      <li><a href="">HTML</a></li>
      <li><a href="">HTML</a></li>
      <li><a href="">HTML</a></li>
      <li><a href="">HTML</a></li>
      <li><a href="">HTML</a></li>
      <li><a href="">HTML</a></li>
    </ul>
    <a href="#" class="modify">修改兴趣</a>
  </div>

  <div class="course wrapper">
    <!-- 标题 -->
    <div class="hd">
      <h3>精品推荐</h3>
      <a href="#" class="more">查看全部</a>
    </div>
    <div class="bd">
      <ul>
        <li><a href="#">
          <div class="pic">
            <img src="./uploads/course01.png" alt="">
          </div>
          <div class="text">
            <h4>Java数据看板项目实战</h4>
            <p><span>高级</span> · 1125人在学习</p>
          </div>
        </a></li>
        <li><a href="#">
          <div class="pic">
            <img src="./uploads/course02.png" alt="">
          </div>
          <div class="text">
            <h4>Java数据看板项目实战</h4>
            <p><span>高级</span> · 1125人在学习</p>
          </div>
        </a></li>
        <li><a href="#">
          <div class="pic">
            <img src="./uploads/course03.png" alt="">
          </div>
          <div class="text">
            <h4>Java数据看板项目实战</h4>
            <p><span>高级</span> · 1125人在学习</p>
          </div>
        </a></li>
        <li><a href="#">
          <div class="pic">
            <img src="./uploads/course04.png" alt="">
          </div>
          <div class="text">
            <h4>Java数据看板项目实战</h4>
            <p><span>高级</span> · 1125人在学习</p>
          </div>
        </a></li>
        <li><a href="#">
          <div class="pic">
            <img src="./uploads/course05.png" alt="">
          </div>
          <div class="text">
            <h4>Java数据看板项目实战</h4>
            <p><span>高级</span> · 1125人在学习</p>
          </div>
        </a></li>
        <li><a href="#">
          <div class="pic">
            <img src="./uploads/course06.png" alt="">
          </div>
          <div class="text">
            <h4>Java数据看板项目实战</h4>
            <p><span>高级</span> · 1125人在学习</p>
          </div>
        </a></li>
        <li><a href="#">
          <div class="pic">
            <img src="./uploads/course07.png" alt="">
          </div>
          <div class="text">
            <h4>Java数据看板项目实战</h4>
            <p><span>高级</span> · 1125人在学习</p>
          </div>
        </a></li>
        <li><a href="#">
          <div class="pic">
            <img src="./uploads/course08.png" alt="">
          </div>
          <div class="text">
            <h4>Java数据看板项目实战</h4>
            <p><span>高级</span> · 1125人在学习</p>
          </div>
        </a></li>
        <li><a href="#">
          <div class="pic">
            <img src="./uploads/course09.png" alt="">
          </div>
          <div class="text">
            <h4>Java数据看板项目实战</h4>
            <p><span>高级</span> · 1125人在学习</p>
          </div>
        </a></li>
        <li><a href="#">
          <div class="pic">
            <img src="./uploads/course10.png" alt="">
          </div>
          <div class="text">
            <h4>Java数据看板项目实战</h4>
            <p><span>高级</span> · 1125人在学习</p>
          </div>
        </a></li>
      </ul>
    </div>
  </div>

  <!-- 前端工程师 -->
  <div class="wrapper">
    <div class="hd">
      <h3>前端开发工程师</h3>
      <ul>
        <li><a href="#" class="active">热门</a></li>
        <li><a href="#">初级</a></li>
        <li><a href="#">中级</a></li>
        <li><a href="#">高级</a></li>
      </ul>
      <a href="#" class="more">查看全部</a>
    </div>
    <div class="bd">
      <div class="left">
        <img src="./uploads/web_left.png" alt="">
      </div>
      <div class="right">
        <div class="top"><img src="./uploads/web_top.png" alt=""></div>
        <div class="bottom">
          <ul>
            <li><a href="#">
              <div class="pic">
                <img src="./uploads/course01.png" alt="">
              </div>
              <div class="text">
                <h4>Java数据看板项目实战</h4>
                <p><span>高级</span> · 1125人在学习</p>
              </div>
            </a></li>
            <li><a href="#">
              <div class="pic">
                <img src="./uploads/course01.png" alt="">
              </div>
              <div class="text">
                <h4>Java数据看板项目实战</h4>
                <p><span>高级</span> · 1125人在学习</p>
              </div>
            </a></li>
            <li><a href="#">
              <div class="pic">
                <img src="./uploads/course01.png" alt="">
              </div>
              <div class="text">
                <h4>Java数据看板项目实战</h4>
                <p><span>高级</span> · 1125人在学习</p>
              </div>
            </a></li>
            <li><a href="#">
              <div class="pic">
                <img src="./uploads/course01.png" alt="">
              </div>
              <div class="text">
                <h4>Java数据看板项目实战</h4>
                <p><span>高级</span> · 1125人在学习</p>
              </div>
            </a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- 底部版权 -->
  <div class="footer">
    <div class="wrapper">
      <div class="left">
        <a href="#"><img src="./images/logo.png" alt=""></a>
        <p>Copyright © 2023 陈德基Copyright © 2023 陈德基Copyright © 2023 陈德基Copyright © 2023 陈德基Copyright © 2023 陈德基</p>
        <a href="#" class="download">下载APP</a>
      </div>
      <div class="right">
        <dl>
          <dt>合作伙伴</dt>
          <dd><a href="#">合作机构</a></dd>
          <dd><a href="#">合作导师</a></dd>
        </dl>
        <dl>
          <dt>合作伙伴</dt>
          <dd><a href="#">合作机构</a></dd>
          <dd><a href="#">合作导师</a></dd>
        </dl>
        <dl>
          <dt>合作伙伴</dt>
          <dd><a href="#">合作机构</a></dd>
          <dd><a href="#">合作导师</a></dd>
        </dl>
      </div>
    </div>
  </div>
</body>
</html>